<template>  
    <view class="container">
		<view class="user-section">
			<view class="bg"></view>
			<view style="height: 200upx;width: 690upx;color: #fff;">
				<view style="position: absolute;top: 50upx;" @click="jump" data-src="/pageA/member/info/info">
					<image style="width: 150upx;height: 150upx;border: 2px solid #fff;border-radius: 50%;" :src="res.avatar||'/static/missing-face.png'"></image>		
				</view>
				<view style="position: absolute;top: 65upx;left: 200upx;">
					<view>
						ID:{{res.id||'当前用户无id'}}
					</view>
					<view>
						{{openid||'游客'}}
					</view>
					<view>
						{{res.level_name}}
					</view>
				</view>
					<view style="margin-left: 220upx;display: flex;position: absolute;right: 40upx;top: 80upx;">
						<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="../commission/all">
							<image style="width: 50upx;height:50upx;" src="../../static/message.png" mode=""></image>
							<text style="font-size: 20upx;">提现</text>
						</view>
						<view @click="navTo('/pages/commission/qrcode/qrcode')" style="display: flex;flex-direction: column;margin-left: 20upx;text-align: center;">
							<image style="width: 50upx;height: 50upx;" src="../../static/set.png" mode=""></image>
							<text style="font-size: 20upx;">设置</text>
						</view>
						
					</view>
				</view>
			<view class="tj-sction" style="display: flex;flex-direction: column;position: absolute;top: 240upx; width: 690upx;">
				<view class="" style="padding:10upx 30upx 0upx 30upx;margin-bottom: 20upx;">
					<!-- <view class="">
						<text>粉丝人数: </text>
						<text style="font-weight: bold;font-size: 34upx;margin: 0upx 15upx;">{{res.x_num}}</text>
					</view> -->
					<view>
						<text style="color: #ADADAD;font-size: 22upx;">赶快邀请身边的小伙伴来注册吧!~~</text>
						 <!-- <progress :percent="percent1" activeColor='#8F8F8F' stroke-width='1' show-info /> -->
					</view>
				</view>
				<view style="display: flex;justify-content: space-around;">
				<view class="tj-item" @click="jump" data-src="/pageA/jjmx/jjmx">
					<text style="color: #000;">积分 : 
					<text class="num" style="color: #EB2E15;font-weight: 550;padding-left: 6upx;" v-if="res.credit2">{{res.credit2}}</text></text>
				</view>
				<!-- <view class="tj-item" @click="navTo('/pageA/member/shopy/shopy')">
					<text style="color: #000;">收益 : 
					<text class="num" style="font-weight: 550" v-if="res.x_money">{{res.x_money}}</text></text>
				</view> -->
				<!-- <view class="tj-item">
					<text style="color: #000;">优惠券积分 : 
					<text class="num" style="font-weight: 550" v-if="res.credit1">{{res.credit1}}</text></text>
				</view> -->
				<view class="tj-item" @click="jump" data-src="/pageA/wpq/wpq">
					<text style="color: #000;">分红券 : 
					<text class="num" style="font-weight: 550;padding-left: 6upx;" v-if="res.wp_coupon">{{res.wp_coupon}}</text></text>
				</view>
				</view>
			</view>
		</view>
		
		<view 	class="cover-container">
			<!-- 订单 -->
			<view class="order-section" style="display: flex;justify-content: space-between;margin-bottom: -40upx;padding:20upx;height: 100upx;margin-top: 255upx;">
			<view class=""  style="font-size: 40upx;font-weight: 550;">
				我的订单
			</view>
			<view style="font-size: 24upx;color: #908F8D;font-weight: 550;line-height: 70upx;" @click="navTo('/pages/order/order?index=0')" hover-class="common-hover"  :hover-stay-time="50">
				全部 >
			</view>
			</view>
			<view class="order-section" style="color:#000">
				<!-- <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouye"></text>
					<text>全部订单</text>
				</view> -->
				<view class="order-item" @click="navTo('/pages/order/order?index=1')"  hover-class="common-hover" :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifukuan.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=2')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifahuo.png" mode=""></image>
					<text>待发货</text>
				</view>
				
				<view class="order-item" @click="navTo('/pages/order/order?index=3')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daishouhuo.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=4')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daipingjia.png" mode=""></image>
					<text>已完成</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=5')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/shouhou.png" mode=""></image>
					<text>已取消</text>
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="history-section icon">
				<view class="" style="font-size: 40upx;font-weight: 550;padding:0upx 20upx;height: 80upx;line-height: 80upx;">
					我的服务
				</view>
				<view class="order-status">
					<view class="status-wrap">
						<view class="status-list">
							<view class="status-item" hover-class="btn-hover" v-for="(item, index) in user1" :key="index" @click="navTo(item.path)">
								<view class="item-icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="item-text">{{ item.name }}</view>
							</view>
						</view>
					</view>
					<view class="status-wrap">
						<view class="status-list">
							<view class="status-item" hover-class="btn-hover" v-for="(item, index) in user2" :key="index" @click="navTo(item.path)">
								<view class="item-icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="item-text">{{ item.name }}</view>
							</view>
						</view>
					</view>
					<view class="status-wrap">
						<view class="status-list">
							<view class="status-item" hover-class="btn-hover" v-for="(item, index) in user3" :key="index" @click="navTo(item.path)">
								<view class="item-icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="item-text">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view style="margin: 50upx 0;">
			<button hover-class="btn-hover" style="background-color: #EB2E15;height: 100upx;line-height: 100upx;color: #fff;width: 90%;margin-left: 5%;border-radius: 20upx;" @click="logout">退出登录</button>
		</view>
    </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
    import {  
        mapState 
    } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		components: {
			listCell
		},
		data(){
			return {
				user_id:'',
				token:'',
				timestamp:'',
				res:[],
				percent1:0,
				percent:'',
				integration:'',
				level_name:'',
				real_head_img:'',
				real_name:'',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				openid:"",
				user1:[
					{ name: '会员资料', icon: '/static/06.png', path: '/pageA/member/info/info',badge: 0},
					{ name: '积分明细', icon: '../../static/07.png', path:'/pageA/jjmx/jjmx',badge: 0},
					{ name: '我的分享', icon: '../../static/08.png', path:'/pageA/member/myterritory',badge: 0},
					{ name: '分红券', icon: '../../static/09.png', path:'/pageA/wpq/wpq',badge: 0}
				],
				user2:[
					{ name: '会员互转', icon: '../../static/99.png', path:'/pages/hyhz/hyhz',badge: 0},
					{ name: '我的足迹', icon: '../../static/10.png', path:'/pageA/member/history',badge: 0},
					{ name: '专属海报', icon: '../../static/11.png', path:'/pages/commission/qrcode/invite_code',badge: 0},
					{ name: '结算记录', icon: '../../static/12.png', path:'/pages/yhq/yhq',badge: 0}
				],// @click="navTo('/pageA/yhq/yhq')"  优惠券
				user3:[
					{ name: '地址管理', icon: '../../static/98.png', path:'/pageA/member/address/address',badge: 0},
					{ name: '会员充值', icon: '../../static/13.png', path:'/pages/chongzhi/chongzhi',badge: 0},
					{ name: '我的客服', icon: '../../static/14.png', path:'/pages/wdkf/wdkf',badge: 0},
					{ name: '新闻公告', icon: '../../static/15.png', path:'/pages/media/media',badge: 0}
				],
			}
		},
		onShow:function(){
		   uni.getStorage({
		    key: 'openid',
		    success: (res) => {
		     this.openid = res.data
		     this.setajax()
		    },
		    fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
		    }
		   });
		 },
		methods: {
			setajax(){
				uni.request({
					url: 'http://weipin.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data: {'openid':this.openid},
					success: res => {
						this.res = res.data
						console.log(this.res)
						uni.setStorage({
							key: 'pid_father',
							data: res.data.id
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},
			navTo(url){
				if (url == "" ) {
					this.jumpno()
					return
				} else {
					uni.navigateTo({
						url
					})  
				}
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			logout(){
				uni.showModal({
					content: "是否退出登录",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if(res.confirm){
							uni.clearStorageSync()
							uni.reLaunch({
								url: '../login/login'
							});
						}
					}
				})
			},
			jumpno() {
				uni.showModal({
				title:'提示',
				content:'功能即将开放',
				showCancel: false,
				confirmColor:"#DD524D",
					success() {
						return
					}
				})
			},
			
			
    }  
	}
</script>
<style lang='scss'>
	.order-status {
		padding: 0 20rpx;
		.status-wrap {
			border-radius: 25rpx;
			overflow: hidden;
			.status-list {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background: #fff;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.status-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.item-icon {
						line-height: 1;
						width: 80upx;
						height: 80upx;
						color: #bbb;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.item-text {
						height: 40upx;
						line-height: 40upx;
						font-size: 28rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
	.btn-hover {
		background: #f2f2f2 !important;
	}
	
	
	
	button::after {
		border: none;
	}
	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height:inherit;
	}
	button {
		border-radius:0;
	}
	
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}

	.user-section{
		height: 300upx;
		padding: 60upx 30upx 0upx 30upx;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			background-color: #EB2E15;
			/* opacity: .7; */
		}
	}
	.user-info-box{
		color: #fff;
		height: 170upx;
		display: flex;
		position:relative;
		z-index: 1;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			width: 30upx;
			margin-left: 20upx;
		}
		.userid {
			margin-left: 20upx;
		}
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: 12upx;
			color: #ADADAD;
			margin-top: 20upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -180upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			/* flex-direction: column; */
			height: 90upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.order-section{
		@extend %section;
		padding: 0upx 0upx 20upx 0upx;
		/* margin-top: 20upx; */
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 100upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			line-height: 1.2;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 30upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			/* align-items: center; */
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.yticon{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	
</style>